import 'dart:io';

import 'package:ai/config/Config.dart';
import 'package:ai/util/ToastUtils.dart';
import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

import '../../util/CommonUtils.dart';

@RoutePage()
class ComplaintPage extends StatefulWidget {
  const ComplaintPage({super.key});

  @override
  State<ComplaintPage> createState() => _ComplaintPageState();
}

class _ComplaintPageState extends State<ComplaintPage> {
  List<File> _images = [];

  Future<void> _pickMultipleImages() async {
    final picker = ImagePicker();
    final pickedFiles = await picker.pickMultiImage(limit: 3);

    if (pickedFiles.length + _images.length > 3) {
      if (context.mounted) {
        ToastUtils.info(context, "最多只能选择3张图片");
      }
    } else {
      setState(() {
        _images.addAll(
          pickedFiles.map((pickedFile) => File(pickedFile.path)),
        );
      });
    }
  }

  Future<void> remove(int index) async {
    List<File> _images1 = [];
    for (var i = 0; i < _images.length; i++) {
      if (index != i) {
        _images1.add(_images[i]);
      }
    }
    setState(() {
      _images = _images1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("举报"),
      ),
      body: ListView(
        children: [
          Container(
            padding: const EdgeInsets.only(left: 24),
            color: Config.primaryColor,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 24,
                ),
                Text(
                  "您的意见与建议",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  "是我们宝贵的财富",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 24,
                ),
              ],
            ),
          ),
          SizedBox(
            height: 16,
          ),
          Container(
            padding: const EdgeInsets.only(
              left: 24,
              bottom: 16,
              right: 24,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.circle,
                      size: 16,
                      color: Config.primaryColor,
                    ),
                    const SizedBox(
                      width: 4,
                    ),
                    Text(
                      "请选择举报的内容",
                      style: TextStyle(
                        color: Config.color3a,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 16,
                ),
                TextField(
                  maxLines: 8,
                  minLines: 8,
                  decoration: InputDecoration(
                    hintText: "您遇到什么问题？或者有什么建议？欢迎宁反馈给我们，谢谢您的宝贵意见！",
                    hintStyle: TextStyle(
                      color: Config.color9a,
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Config.colorE6,
                        width: 1,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Config.colorE6,
                        width: 2,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.only(
              left: 24,
              bottom: 16,
              right: 24,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.circle,
                      size: 16,
                      color: Config.primaryColor,
                    ),
                    const SizedBox(
                      width: 4,
                    ),
                    Text(
                      "您的联系方式",
                      style: TextStyle(
                        color: Config.color3a,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 16,
                ),
                TextField(
                  maxLines: 1,
                  minLines: 1,
                  decoration: InputDecoration(
                    hintText: "留下您的微信或者QQ",
                    hintStyle: TextStyle(
                      color: Config.color9a,
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Config.colorE6,
                        width: 1,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Config.colorE6,
                        width: 2,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.only(
              left: 24,
              bottom: 16,
              right: 24,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.circle,
                      size: 16,
                      color: Config.primaryColor,
                    ),
                    const SizedBox(
                      width: 4,
                    ),
                    Text(
                      "上传照片（最多3张）",
                      style: TextStyle(
                        color: Config.color3a,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 16,
                ),
                GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 8,
                    mainAxisSpacing: 8,
                  ),
                  itemCount: _images.length < 3 ? _images.length + 1 : 3,
                  itemBuilder: (BuildContext context, int index) {
                    return index < _images.length
                        ? Container(
                            child: Stack(
                              children: [
                                Container(
                                  padding:
                                      const EdgeInsets.only(top: 8, right: 8),
                                  child: Image.file(
                                    _images[index],
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                Positioned(
                                  right: 0,
                                  top: 0,
                                  child: GestureDetector(
                                    onTap: () {
                                      remove(index);
                                    },
                                    child: CommonUtils.getImageAsset(
                                      "ic_close",
                                      width: 32,
                                      color: Config.color39,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          )
                        : GestureDetector(
                            onTap: () {
                              _pickMultipleImages();
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                color: Config.colorA9,
                              ),
                              child: Icon(
                                Icons.add,
                                color: Config.colorC,
                                size: 48,
                              ),
                            ),
                          );
                  },
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
